<template>
<div>
	<div>
		<Alert v-if="order.info.status==2" show-icon>订单已关闭</Alert>
		<circle-steps v-else :step="step" :steps="steps"></circle-steps>
	</div>

    <Tabs size="small" mgt3>
        <TabPane label="订单信息">
            <order-info :order="order"></order-info>
        </TabPane>
        <TabPane label="物流信息">
            <order-wuliu :orderNumber="order.orderNumber" mgt3></order-wuliu>
        </TabPane>
        <TabPane label="订单评价" pd1>
            <div v-if="order.info.status==1">
                <div class="bigtitle" mgt3 nobd>
                    <div class="bigtitle-title" nobd sz1>订单评价</div>
                </div>
                <div v-if="order.evaluateInfo.description" bd-gray4 bg-gray5 pd4>
                    <p lh1 long>
                        <span left bg-cover bd-gray3 bd-circle h1 w1 mgr2 :style="{'background-image':`url(${memberMap[order.memberInfo.id].head})`}"></span>
                        <span mgr2>{{memberMap[order.memberInfo.id].userName}}</span>
                        <span gray3 mgr2>{{formatTimeStr(order.evaluateInfo.evaluateTime)}}</span>
                        <span mgr2>订单号：{{order.orderNumber}}</span>
                        <Rate v-model="order.evaluateInfo.rateValue" disabled />
                    </p>
                    <div v-html="order.evaluateInfo.description" mgt2></div>
                    <div mgt2>
                        <span v-for="(pic, index) in order.evaluateInfo.pictures" :key="index" inline-block bg-cover bd-gray4 h3 w3 mgr2 
                            :style="{'background-image':`url(${pic})`}" linkable @click="viewPicture(pic)"></span>
                    </div>
                </div>
            </div>
            <div v-else>暂无</div>
        </TabPane>
        <TabPane label="退款信息" pd1>
            <order-refund-manager :orderNumber="order.orderNumber" :orderTotalAmount="order.info.totalAmount" :disabled="!canRefund(order)"></order-refund-manager>
        </TabPane>
    </Tabs>

    
</div>
</template>

<script lang="ts">
;import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import OrderBase from './OrderBase';
import CircleSteps from '../../components/common/circle-steps.vue'
import PictureBox from '@common/components/picture-box.vue';
import OrderInfo from './order-info.vue'
import OrderWuliu from './order-wuliu.vue'
import OrderRefundManager from './order-refund-manager.vue'

@Component({
    components: { CircleSteps, PictureBox, OrderWuliu, OrderInfo, OrderRefundManager }
})
export default class OrderDetail extends OrderBase{
    @Prop() order:any;
	get memberMap() {
		return this.$store.state.member.memberMap;
	}
	get steps():Array<string> {
		if(this.order.info.status != 2) {
			return [
				"订单已提交",
				"付款成功",
				"商品出库",
				"等待收货",
				"完成"
			];
		}else {
			return [
				"订单已提交",
				"订单已关闭"
			];
		}
	}
	get step():Number {
		var order = this.order;
		if(order.info.status == 0) {
			// 订单已创建
			if(order.paymentInfo.paymentType == 0 || order.paymentInfo.paymentType == 2) {
				if(order.shipInfo.shipStatus == 0) {
					return [1, 1, 2, 2, 2, 3][order.paymentInfo.paymentStatus];
				}else {
					return [1, 3, 4, 4, 5, 5, 5][order.shipInfo.shipStatus];
				}
			}else if(order.paymentInfo.paymentType == 1) {
				//if(order.shipInfo == )
			}
		}else if(order.info.status == 1) {
			// 交易成功
			return 5;
		}else if(order.info.status == 2) {
			// 交易关闭
			return 2;
		}
	}
	async created() {
	}
}
</script>